((doc) => {
    // 获取元素
    let box = doc.querySelector('.box'),
        mask = doc.querySelector('.mask'),
        big = doc.querySelector('.big');

    let init = () => {
        bindEvent()
    }

    // 绑定元素
    const bindEvent = () => {
        box.addEventListener("mouseenter", () => handleBoxMouseEnter())
        box.addEventListener("mouseleave", () => handleBoxMouseLeave())
        box.addEventListener("mousemove", function (e) { handleBoxMouseMove(e, this) })
    }

    function handleBoxMouseEnter() {
        mask.style.display = 'block'
        big.style.display = 'block'
    }

    function handleBoxMouseLeave() {
        mask.style.display = 'none'
        big.style.display = 'none'
    }

    function handleBoxMouseMove(e, _this) {
        let x = e.pageX - _this.offsetLeft,
            y = e.pageY - _this.offsetTop;

        let maskX = x - mask.offsetWidth / 2,
            maskY = y - mask.offsetHeight / 2;

        // 范围限制
        maskX <= 0 ? maskX = 0 : maskX;
        maskY <= 0 ? maskY = 0 : maskY;

        let maskMaxX = box.offsetWidth - mask.offsetWidth,
            maxkMaxY = box.offsetHeight - mask.offsetHeight;

        maskX >= maskMaxX ? maskX = maskMaxX : maskX;
        maskY >= maxkMaxY ? maskY = maxkMaxY : maskY;

        mask.style.left = maskX + 'px'
        mask.style.top = maskY + 'px'

        // big
        let bigX = -(maskX * 2) + 'px',
            bigY = -(maskY * 2) + 'px';

        big.style.backgroundPositionX = bigX
        big.style.backgroundPositionY = bigY
    }


    init()
})(document)